"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { Slider } from "@/components/ui/slider"
import { Loader2 } from "lucide-react"
import { Switch } from "@/components/ui/switch"

interface ConfigOption {
  id: string
  label: string
  type: string
  options?: string[]
  defaultValue?: any
  min?: number
  max?: number
  step?: number
  placeholder?: string
  accept?: string
}

interface AlgorithmFormProps {
  configOptions: ConfigOption[]
  onSubmit: (formData: Record<string, any>) => void
  loading: boolean
}

export default function AlgorithmForm({ configOptions, onSubmit, loading }: AlgorithmFormProps) {
  const [formData, setFormData] = useState<Record<string, any>>(() => {
    // 初始化表单数据，使用默认值
    return configOptions.reduce((acc, option) => {
      acc[option.id] = option.defaultValue !== undefined ? option.defaultValue : ""
      return acc
    }, {} as Record<string, any>)
  })

  const handleChange = (id: string, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [id]: value,
    }))
  }

  const handleFileChange = (id: string, files: FileList | null) => {
    if (files && files.length > 0) {
      setFormData((prev) => ({
        ...prev,
        [id]: files[0],
      }))
    }
  }

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSubmit(formData)
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {configOptions.map((option) => (
        <div key={option.id} className="space-y-2">
          <Label htmlFor={option.id}>{option.label}</Label>
          
          {option.type === "text" && (
            <Input
              id={option.id}
              value={formData[option.id] || ""}
              onChange={(e) => handleChange(option.id, e.target.value)}
              placeholder={option.placeholder}
              disabled={loading}
            />
          )}
          
          {option.type === "textarea" && (
            <Textarea
              id={option.id}
              value={formData[option.id] || ""}
              onChange={(e) => handleChange(option.id, e.target.value)}
              placeholder={option.placeholder}
              disabled={loading}
            />
          )}
          
          {option.type === "number" && (
            <Input
              id={option.id}
              type="number"
              value={formData[option.id]}
              onChange={(e) => handleChange(option.id, parseFloat(e.target.value))}
              min={option.min}
              max={option.max}
              step={option.step}
              disabled={loading}
            />
          )}
          
          {option.type === "select" && option.options && (
            <Select
              value={formData[option.id]}
              onValueChange={(value) => handleChange(option.id, value)}
              disabled={loading}
            >
              <SelectTrigger id={option.id}>
                <SelectValue placeholder="选择..." />
              </SelectTrigger>
              <SelectContent>
                {option.options.map((opt) => (
                  <SelectItem key={opt} value={opt}>
                    {opt}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          
          {option.type === "slider" && (
            <div className="py-4">
              <Slider
                value={[formData[option.id]]}
                onValueChange={(values) => handleChange(option.id, values[0])}
                min={option.min || 0}
                max={option.max || 100}
                step={option.step || 1}
                disabled={loading}
              />
              <div className="text-center mt-2 text-sm text-muted-foreground">
                {formData[option.id]}
              </div>
            </div>
          )}
          
          {option.type === "boolean" && (
            <div className="flex items-center space-x-2">
              <Switch
                id={option.id}
                checked={formData[option.id]}
                onCheckedChange={(checked) => handleChange(option.id, checked)}
                disabled={loading}
              />
              <Label htmlFor={option.id}>启用</Label>
            </div>
          )}
          
          {option.type === "file" && (
            <Input
              id={option.id}
              type="file"
              onChange={(e) => handleFileChange(option.id, e.target.files)}
              accept={option.accept}
              disabled={loading}
            />
          )}
        </div>
      ))}
      
      <Button type="submit" disabled={loading} className="w-full">
        {loading ? (
          <>
            <Loader2 className="mr-2 h-4 w-4 animate-spin" /> 正在执行...
          </>
        ) : (
          "执行算法"
        )}
      </Button>
    </form>
  )
} 